<template>
    <div id="frame-outer">
        <h3 v-if="isCreate">添加用户</h3>
        <h3 v-else>修改用户信息</h3>
        <div id="form-outer">
            <el-form :model="user" label-width="100px">
                <el-form-item :label="label.name">
                    <el-input v-model="user.name" />
                </el-form-item>
                <el-form-item :label="label.telphone">
                    <el-input v-model="user.telphone" :class="`${phoneNumberNotPass && 'alertInput'}`" @blur="checkTelPhoneNumber"/>
                    <text v-if="phoneNumberNotPass" style="color:red;font-size:15px">请检查您的电话号码</text>
                </el-form-item>
                <el-form-item :label="label.password"   >
                    <el-input v-model="user.password" :class="`${passwordLengthNotPass && 'alertInput'}`" @blur="comparePassword" show-password/>
                    <text v-if="passwordLengthNotPass" style="color:red;font-size:15px">密码长度未达到八位</text>
                </el-form-item>
                <el-form-item :label="label.password_again">
                    <el-input :class="`${passwordNotSame && 'alertInput'}`" @blur="comparePassword" v-model="user.password_again" show-password/>
                    <text v-if="passwordNotSame" style="color:red;font-size:15px">前后密码不一致</text>
                    <text v-if="passwordSame" style="color:green;font-size:15px;font-weight:bolder">通过验证</text>
                </el-form-item>
                <el-form-item :label="label.belong">
                    <el-input v-model="user.belong" />
                </el-form-item>
                <el-form-item :label="label.identify">
                    <el-select v-model="user.identify" placeholder="请选择用户身份">
                    <el-option label="普通用户" :key=2 :value=2 />
                    <el-option v-if="thisUserIdentify == '0'" 
                    label="管理员" :value=1 />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="isCreate">
                    <el-button type="primary" @click="submitForm()">创建</el-button>
                    <el-button type="warning" @click="resetForm()">重置</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button type="primary" @click="updateUser()">更新</el-button>
                    <el-button type="warning" @click="back()">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    import {ElMessage} from "element-plus"
    import {getCookie} from "@/utils/cookie.utils.js"

    export default {
        data() {
            return {
                thisUserIdentify:"1",
                isCreate:true,
                user:{
                    id:0,
                    name:"",
                    telphone:"",
                    password:"",
                    password_again:"",
                    belong:"",
                    identify:null
                },
                label:{
                    name:"姓名",
                    telphone:"电话",
                    password:"密码",
                    password_again:"密码",
                    belong:"所属教研室",
                    identify:"身份"
                },
                identify:"请选择用户身份",
                passwordNotSame:false,
                passwordSame:false,
                phoneNumberNotPass:false,
                passwordLengthNotPass:false
            };
        },
        methods:{
            submitForm(){
                let request_data = this.user
                request_data["identify"] = parseInt(request_data["identify"])
                axios.post("/user/create",request_data).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"用户添加成功"
                        })
                        this.resetForm()
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },
            updateUser(){
                console.log(this.user)
                axios.post("/user/update",this.user).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"信息修改成功"
                        })
                        this.$router.back()
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },  
            back(){
                this.$router.back()
            },
            resetForm(){
                Object.keys(this.user).forEach((key)=>{
                    this.user[key] = ""
                })
                this.passwordNotSame = false
                this.passwordLengthNotPass = false
                this.passwordNumberNotPass = false
                this.phoneNumberNotPass = false
            },
            comparePassword(){
                console.log(this.user.password)
                console.log(this.$data)
                if(this.user.password.length > 8){
                    this.passwordLengthNotPass = false
                }else{
                    this.passwordLengthNotPass = true
                    this.passwordNotSame = false
                    this.passwordSame = false
                    return
                }
                if(this.user.password != this.user.password_again){
                    this.passwordNotSame = true;
                    this.passwordSame = false
                }else{
                    this.passwordNotSame = false;
                    this.passwordSame = true
                }
            },
            checkTelPhoneNumber(){
                if(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.user.telphone)){
                    this.phoneNumberNotPass = false
                    return
                }
                else
                {
                    this.phoneNumberNotPass = true
                }
                
            }
        },
        mounted(){
            this.thisUserIdentify = getCookie("identify")
            if(this.$route.path.startsWith("/index/adminUserAdd")){
                this.isCreate = true
                this.identify = "普通用户"
            }else{
                this.isCreate = false
                this.user.id = parseInt( this.$route.params.id )
                axios.post("/user/queryUser",{"id": this.user.id}).then((res)=>
                {
                    if(res.data.code == 0){
                    let data = res.data.data
                    Object.keys(data).forEach(
                        (key)=>{
                            if(key != "create_at" && key != "create_at"){
                                this.user[key] = data[key]
                            }
                        }
                    )
                    this.user.password_again = this.user.password
                    if(this.user.identify == 1){
                        this.identify = "管理员"
                    }else{
                        this.identify = "普通用户"
                    }
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            }
        }
    }
    
</script>

<style scopted>

#frame-outer{
    height: 100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}

#form-outer{
    height:70%;
    width:80%;
}

.alertInput{
    border:red solid 2px; 
}

</style>

